<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏和内容框示例</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #333;
            padding: 10px 20px;
            color: white;
        }
        .navbar .logo img {
            height: 40px;
        }
        .navbar .system-name {
            flex: 1;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
        .navbar .titles a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        .navbar .titles a:hover {
            text-decoration: underline;
        }

        /* 页面布局 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px); /* 除去导航栏的高度 */
        }

        /* 左侧垂直菜单样式 */
        .sidebar {
            width: 200px;
            border-right: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }
        .menu-item {
            position: relative;
            cursor: pointer;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .menu-item:hover {
            background-color: #e0e0e0;
        }
        .menu-item:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .submenu {
            display: none;
            background-color: #fff;
            padding-left: 20px;
            margin-top: 5px;
            border-left: 2px solid #ccc;
        }
        .submenu a {
            display: block;
            padding: 5px 0;
            color: #333;
            text-decoration: none;
        }
        .submenu a:hover {
            text-decoration: underline;
        }
        .menu-item.active .submenu {
            display: block;
        }

        /* 右侧内容框样式 */
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
            overflow-y: auto;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .content h1 {
            margin-top: 0;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">
        <img src="/image/校徽.png" alt="图标">
    </div>
    <div class="system-name">人力资源管理系统</div>
    <div class="titles">
        <a href="../index.jsp">首页</a>
        <a href="#about">关于</a>
        <a href="#contact">联系我们</a>
    </div>
</div>

<!-- 页面主体布局 -->
<div class="main-container">
    <!-- 左侧垂直菜单 -->
    <div class="sidebar">
        <div class="menu-item" data-tooltip="人力资源管理模块">
            人力资源管理模块
            <div class="submenu">
                <a href="../humanAdd.jsp">添加档案</a>
                <a href="humanQuery.jsp">档案查询和管理</a>
            </div>
        </div>
        <div class="menu-item" data-tooltip="管理薪酬">
            薪酬管理模块
        </div>
    </div>


    <!-- 右侧内容框 -->
    <div class="content">
        <h1>档案信息管理</h1>
        <div id="archiveContainer"></div>
</div>

</div>



<script>
    // JavaScript 实现下拉菜单功能
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', () => {
            // 切换 active 类，控制子菜单显示/隐藏
            item.classList.toggle('active');
        });
    });

    // 页面加载时调用接口
    window.onload = function () {
        // 定义全局变量存储档案数据
        let archiveData = [];

        // 获取所有人力资源档案数据
        fetch('/human', {
            method: 'GET',
        })
            .then(response => response.json()) // 解析 JSON 响应
            .then(data => {
                console.log('接口返回的数据:', data); // 调试输出返回数据

                // 检查返回结果是否成功
                if (data.code === 1 && Array.isArray(data.data) && data.data.length > 0) {
                    archiveData = data.data; // 存储数据到全局变量
                    renderArchives(archiveData); // 调用渲染函数
                } else {
                    alert(`档案信息加载失败：${data.msg || '没有档案记录'}`);
                }
            })
            .catch(error => {
                console.error('加载档案信息出错：', error);
                alert('无法加载档案信息，请稍后重试');
            });
    };

    /**
     * 渲染档案数据到页面
     * @param {Array} archives 档案数据数组
     */
    function renderArchives(archives) {
        const container = document.getElementById('archiveContainer');
        container.innerHTML = ''; // 清空容器

        archives.forEach(archive => {
            // 创建档案块
            const archiveBlock = document.createElement('div');
            archiveBlock.style.border = '1px solid #ccc';
            archiveBlock.style.margin = '10px 0';
            archiveBlock.style.padding = '10px';
            archiveBlock.style.borderRadius = '5px';
            archiveBlock.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.1)';

            // 处理性别字段
            const genderText = archive.gender === 1 ? '男' : (archive.gender === 2 ? '女' : '未知');

            // 填充档案块的内容
            archiveBlock.innerHTML = `
            <p><strong>姓名：</strong>${archive.name || '无'}</p>
            <p><strong>部门：</strong>${archive.department_name || '无'}</p>
            <p><strong>性别：</strong>${genderText}</p>
            <p><strong>年龄：</strong>${archive.age || '无'}</p>
            <p><strong>电话：</strong>${archive.phone || '无'}</p>
            <p><strong>身份证号码：</strong>${archive.id_card || '无'}</p>
            <p><strong>薪酬：</strong>${archive.salary ? archive.salary : '无'}</p>
            <p><strong>登记人：</strong>${archive.registrar || '无'}</p>
            <p><strong>登记时间：</strong>${archive.registration_time || '无'}</p>
        `;

            // 创建操作按钮
            const buttonContainer = document.createElement('div');
            buttonContainer.style.marginTop = '10px';

            const editButton = document.createElement('button');
            editButton.textContent = '修改';
            editButton.style.marginRight = '10px';
            editButton.onclick = () => handleEdit(archive.id);

            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.style.backgroundColor = 'red';
            deleteButton.style.color = 'white';
            deleteButton.onclick = () => handleDelete(archive.id);

            buttonContainer.appendChild(editButton);
            buttonContainer.appendChild(deleteButton);
            archiveBlock.appendChild(buttonContainer);

            // 添加档案块到容器
            container.appendChild(archiveBlock);
        });
    }

    /**
     * 编辑档案信息
     * @param {number} id 档案 ID
     */
    function handleEdit(id) {
        alert(`编辑档案 ID: ${id}`);
        // 在此处编写跳转到编辑页面的逻辑
    }

    /**
     * 删除档案信息
     * @param {number} id 档案 ID
     */
    function handleDelete(id) {
        if (confirm(`确认删除档案 ID: ${id}？`)) {
            // 调用删除接口逻辑
            alert(`档案 ID: ${id} 已被删除`);
        }
    }
</script>
</body>
</html>
